<template>
    <div class="sdy-cart">
        <sdyHeader title="啥都有 - 详情页" back></sdyHeader>
        <van-swipe 
        class="img"
        :autoplay="3000" 
        lazy-render>
            <van-swipe-item v-for="image in getsInfo" :key="image">
                <img :src="getsInfo?.img1" />
            </van-swipe-item>
            </van-swipe>
            <p class="price" >￥ {{getsInfo?.originprice}}</p>
        <p class="title">{{getsInfo?.proname}}</p>

        <div class="scroll">
            <van-notice-bar scrollable text="米袋虽空——樱花开哉！" />
            <van-notice-bar
            :scrollable="false"
            text="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。"
            />
        </div>
        <!-- 我是 底部内容 -->
        <Teleport to="#sdy-footer">
            <van-action-bar>
                <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
                <van-action-bar-icon icon="cart-o" @click="clickCart" text="购物车" />
                <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
                <van-action-bar-button type="warning" @click="addCart('getsInfo?.proid | undefined')" text="加入购物车" />
                <van-action-bar-button type="danger" text="立即购买" />
            </van-action-bar>
        </Teleport>




    </div>
</template>

<script setup lang="ts">

// 我们要拿到我们商品的 id
//如果 没有 跳转回到列表页
//如果 有， 请求当前商品详情信息 渲染到 页面上

import { Dialog,  } from 'vant';
import { onMounted , ref} from 'vue';
import { useRoute ,useRouter ,type Router, type RouteLocationNormalizedLoaded } from 'vue-router'
import { detailApi } from '@/api/goodslist'
import {Toast } from 'vant'
import {addCartApi } from '@/api/cart'
import type { MyhotItem } from '@/config/interface'
const $router :Router= useRouter()
const $route : RouteLocationNormalizedLoaded = useRoute()

//验证 是否存在 porid
const testProid = () =>{
    const proid = $route.query.proid
    console.log(proid)

    //判断 是否存在 proid 
    if(!proid) {

        Dialog.alert({
            title: '提示',
            message: '你查看的商品不存在，请稍后再试。',
            }).then(() => {
                //哪来回哪去
                $router.back()
            });
    }

}
// 准备一个 数据， 表示 详细信息
const  getsInfo = ref<MyhotItem>()

const detail = async () =>{
    const res = await detailApi($route.query.proid as string)
    console.log(res )
    getsInfo.value = res.data
}

//加入 购物车
const addCart = async (id: string) =>{
  // console.log(`将 id 为 ${id} 的商品 加入购物车`)

  //根据 id 请求接口数据 ， 加入购物车
  //获取一次用户id 和 token (为了验证 有没有)
  const user_id = window.localStorage.getItem('user_id')
  const token = window.localStorage.getItem('token')

  // 做一次非空验证
  if(!user_id || !token) {
    //你还没有登录,需要登录
    Toast({
      message: '你还没有登录'
    })
    return
  }

  //代码执行到这里， 表示有 user_id 和 token 
  //但是不一定对， 只能请求看看
  const res= await addCartApi(user_id , id )
  console.log(res)

}

// 点击购物车 进入路由跳转
const clickCart = () =>{
    $router.push({path: '/cart'})
}


onMounted(()=>{
    testProid()
    detail()
})
</script>

<style scoped lang="scss">
.sdy-cart{
    height: 100%;
    
    .img{
        height: 350px;
        box-sizing: border-box;
        padding: 15px;

    }
    .price{
        height: 30px;
        font-size: 25px;
        color: #fff;
        background-color: red;
        box-sizing: border-box;
        padding: 0 30px;
        font-weight: 500;


    }
    .title{
        height: 30px;
        font-size: 20px;
        font-weight: 800;
        padding: 0 30px;
    }
    .scroll{
        position: absolute;
        width: 100%;
        bottom: 50px;
        height: 30px;

    }


}

</style>